import React from 'react';
import { Form, Button, Card, Space, Spin, Row, Col } from 'antd';
import type { FormProps, FormInstance, FormItemProps } from 'antd/es/form';
import './style.less';

export interface StandardFormProps<T> extends FormProps<T> {
  loading?: boolean;
  title?: string;
  subtitle?: string;
  submitText?: string;
  resetText?: string;
  showReset?: boolean;
  showCancel?: boolean;
  cancelText?: string;
  onCancel?: () => void;
  onReset?: () => void;
  formRef?: React.RefObject<FormInstance<T>>;
  cardProps?: React.ComponentProps<typeof Card>;
  extra?: React.ReactNode;
  submitter?: React.ReactNode | false;
  submitterPosition?: 'bottom' | 'right';
  submitterProps?: {
    submitButtonProps?: React.ComponentProps<typeof Button>;
    resetButtonProps?: React.ComponentProps<typeof Button>;
    cancelButtonProps?: React.ComponentProps<typeof Button>;
  };
  children?: React.ReactNode;
}

export interface StandardFormItemProps extends FormItemProps {
  colProps?: React.ComponentProps<typeof Col>;
  hidden?: boolean;
}

export const StandardFormItem: React.FC<StandardFormItemProps> = ({
  colProps,
  hidden,
  ...restProps
}) => {
  if (hidden) {
    return null;
  }

  return (
    <Col xs={24} sm={24} md={12} lg={8} xl={8} {...colProps}>
      <Form.Item {...restProps} />
    </Col>
  );
};

function StandardForm<T extends object = any>({
  loading = false,
  title,
  subtitle,
  submitText = '提交',
  resetText = '重置',
  showReset = true,
  showCancel = false,
  cancelText = '取消',
  onCancel,
  onReset,
  formRef,
  cardProps,
  extra,
  submitter,
  submitterPosition = 'bottom',
  submitterProps,
  children,
  ...formProps
}: StandardFormProps<T>) {
  // 处理重置
  const handleReset = () => {
    if (formRef?.current) {
      formRef.current.resetFields();
    }
    if (onReset) {
      onReset();
    }
  };

  // 渲染表单操作按钮
  const renderSubmitter = () => {
    if (submitter === false) {
      return null;
    }

    if (submitter) {
      return submitter;
    }

    return (
      <div className={`standard-form-submitter standard-form-submitter-${submitterPosition}`}>
        <Space>
          {showCancel && (
            <Button onClick={onCancel} {...submitterProps?.cancelButtonProps}>
              {cancelText}
            </Button>
          )}
          {showReset && (
            <Button onClick={handleReset} {...submitterProps?.resetButtonProps}>
              {resetText}
            </Button>
          )}
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            {...submitterProps?.submitButtonProps}
          >
            {submitText}
          </Button>
        </Space>
      </div>
    );
  };

  // 渲染表单标题
  const renderTitle = () => {
    if (!title && !subtitle && !extra) {
      return null;
    }

    return (
      <div className="standard-form-header">
        <div className="standard-form-header-title">
          {title && <h3>{title}</h3>}
          {subtitle && <div className="standard-form-header-subtitle">{subtitle}</div>}
        </div>
        {extra && <div className="standard-form-header-extra">{extra}</div>}
      </div>
    );
  };

  return (
    <Card bordered={false} className="standard-form-card" {...cardProps}>
      {renderTitle()}
      <Spin spinning={loading}>
        <Form
          layout="vertical"
          ref={formRef}
          className="standard-form"
          {...formProps}
        >
          <Row gutter={24}>
            {children}
          </Row>
          {renderSubmitter()}
        </Form>
      </Spin>
    </Card>
  );
}

export default StandardForm;